<template>
	<view class="x-service-item">
		<view class="avatar-box">
			<u--image :src="item.image" width="150rpx" height="150rpx" radius="12rpx" :errorIcon="errIcon"></u--image>
		</view>
		<view class="right-content">
			<view class="title ellipses-one">{{item.name}}</view>
			<view class="price-btn">
				<view class="price">
					<text class="txt">{{item.price}}</text><text class="label">陪护豆</text>
				</view>
				<view class="btn">
					<u-button text="立即预约" :hairline="false" :customStyle="miniBtnStyleSub" shape="square" color="#386FFF"
						@click=""></u-button>
				</view>
			</view>
			<view class="nums">{{item.appointmentCount}} 已预约</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: [Object, String],
				default: {}
			}
		},
		data() {
			return {
				src: '',
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.x-service-item {
		padding: 30rpx 0;
		background: #fff;
		display: flex;
		border-bottom: 2rpx solid #EEEEEE;
		.avatar-box{
			width: 150rpx;
			height: 150rpx;
		}
		.right-content{
			flex: 1;
			min-width: 0;
			padding-left: 30rpx;
			.title{
				margin-bottom: 10rpx;
			}
			.price-btn{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16rpx;
				.price{
					color: $uni-price-color;
					.txt{
						font-size: 30rpx;
						margin-right: 16rpx;
					}
					.label{
						font-size: 24rpx;
					}
				}
				.btn{
					width: 164rpx;
					height: 50rpx;
				}
			}
			.nums{
				font-size: 24rpx;
				color: $uni-color-999;
			}
		}
	}
</style>
